<template>
	<view class="review">
		<NavBar title="店铺评价"/>
		<view class="content">
			<!-- 店铺评价 -->
			<view class="shop-review">
				<view class="review-title"> 店铺评价 </view>
				<view class="review-mark">
					<view class="label"> 您的打分 </view>
					<view class="value"> 
						<uni-rate v-model="star" size="16" activeColor="#F5A623" color="#d5d5d5" margin="8" @change="onChange" />
						<view class="rate"> 很好 </view>
					</view>
				</view>
				<view class="review-content">
					<textarea v-model="txt" placeholder="该店铺满足了您的服务要求吗？"></textarea>
					<view class="img-box">
						<view class="img" v-for="(item, index) in imgUrl" :key="item">
							<image :src="item" class="i-img"/>
							<image src="/static/icon/shop/close-img.png" class="close" @tap="close(index)"/>
						</view>
						<ChooseBtn @choose="chooseImg" />
					</view>
				</view>
			</view>
			<view class="review-btn" @tap="submit"> 立即评价 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import ChooseBtn from '@/components/ChooseBtn.vue'
	import { EvaShopApi } from '@/service/index.js'
	const orderId = ref()
	const shopId = ref()
	const star = ref(5)
	const txt = ref('')
	const isN = ref(0)
	const imgId = ref([])
	const imgUrl = ref([]) // 仅展示
	const orderIndex = ref()
	const onChange = (e) => {
		star.value = e.value
	}
	const chooseImg = (e) => {
		imgId.value.push(e.id)
		imgUrl.value.push(e.img_url)
	}
	const close = (i) => {
		imgId.value.splice(i, 1)
		imgUrl.value.splice(i, 1)
	}
	const submit = () => {
		const params = {
			order_id: orderId.value,
			shop: [{
				star: star.value,
				detail: txt.value,
				shop_id: shopId.value,
				is_ni: 0,
				img: imgId.value.join(',')
			}]
		}
		EvaShopApi(params).then(res => {
			console.log(res);
			uni.navigateBack()
		})
	}
	onLoad((e) => {
		const { order_id, shop_id, index } = e
		shopId.value = shop_id
		orderId.value = order_id
		orderIndex.value = index
	})
</script>

<style lang="scss" scoped>
	.review {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.shop-review {
			padding: 15px 12px;
			border-radius: 10px;
			background-color: #fff;
			.review-title {
				font-weight: 500;
				font-size: 16px;
				color: #333333;
				line-height: 20px;
			}
			.review-mark {
				display: flex;
				align-items: center;
				height: 50px;
				margin-top: 5px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				.label {
					font-weight: 400;
					font-size: 16px;
					color: #333333;
				}
				.value {
					font-weight: 400;
					font-size: 14px;
					color: #999999;
					display: flex;
					align-items: center;
					margin-left: 20px;
					.rate {
						margin-left: 14px;
					}
				}
			}
			.review-content {
				padding-top: 15px;
				textarea {
					width: 100%;
					height: 100px;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
				.img-box {
					display: grid;
					gap: 20px;
					grid-template-columns: repeat(3, 1fr);
					.img {
						width: 74px;
						height: 74px;
						position: relative;
						.i-img {
							width: 100%;
							height: 100%;
							border-radius: 10px;
						}
						.close {
							width: 18px;
							height: 18px;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
			}
		}
		.review-btn {
			margin-top: 20px;
			height: 50px;
			line-height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
		.add {
			position: relative;
			width: 74px;
			height: 74px;
			border-radius: 10px;
			background: #F4F4F4;
			margin-top: 10px;
			&::before, &::after {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: block;
				content: '';
				width: 24px;
				height: 2px;
				background: #D8D8D8;
			}
			&::after {
				width: 2px;
				height: 24px;
			}
		}
	}
</style>
